<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Login</title>
</head>
<body>
    <div id="container">
        <h1>Welcome To Exam-System!</h1>
        <span>Edit by Qingchen</span>
        <button class="back_btn" disabled >START</button>
        <div id="lastest" class="${registerShowed==(null)? '' :'active'}">
            <div id="login_box">
                <h1 id="login_title">
                    Login
                </h1>
                <form action="/login" method="post" class="login_form">
                    <div class="input_container">
                        <input type="text" id="input_name" name="username" required="required">
                        <label for="input_name" class="place_name">Username</label>
                        <div class="bar"></div>
                    </div>
                    <div class="input_container">
                        <input type="password" id="input_pwd" name="password" required="required">
                        <label for="input_pwd" class="place_pwd">Password</label>
                        <div class="bar"></div>
                    </div>
                    <div class="input_container">
                        <input type="text" id="input_code" name="verify" required="required">
                        <label for="input_code" class="place_code">Kaptcha</label>
                        <img src="/kaptcha" alt="点我更换验证码" class="verificationImg">
                        <div class="bar"></div>
                    </div>
                    <div class="alert alert-danger msg" role="alert" <c:if test="${empty errMsg}">hidden</c:if>>${errMsg}</div>
                    <div class="button_container login_button">
                        <button type="submit" id="form_submit"><span>Go</span></button>
                    </div>
                </form>
            </div>
            <h1 class="show_register_btn">
                <img src="/img/Pencil.png" alt="">
                <span>REGISTER</span>
            </h1>
            <div id="register_box" class="${registerShowed}">
                <h1 id="register_title">REGISTER</h1>
                <div class="close"></div>
                <form action="/register" method="post" class="register_form">
                    <div class="input_container register_inputs">
                        <input type="text" id="re_input_name" name="username" required="required">
                        <label for="re_input_name" class="re_place_name">Username</label>
                        <div class="re_bar"></div>
                    </div>
                    <div class="input_container register_inputs">
                        <input type="password" id="re_input_pwd" name="password" required="required">
                        <label for="re_input_pwd" class="re_place_pwd">Password</label>
                        <div class="re_bar"></div>
                    </div>
                    <div class="input_container register_inputs">
                        <input type="password" id="re_input_repwd" name="repassword" required="required">
                        <label for="re_input_repwd" class="re_place_repwd">Repeat Password</label>
                        <div class="re_bar"></div>
                    </div>
                    <div class="input_container register_inputs">
                        <input type="text" id="re_input_code" name="verify" required="required">
                        <label for="re_input_code" class="re_place_code">Kaptcha</label>
                        <img src="/kaptcha" alt="点我更换验证码" class="verificationImg">
                        <div class="re_bar"></div>
                    </div>
                    <div class="alert alert-danger register_msg" role="alert" <c:if test="${empty errMsg}">hidden</c:if>>${errMsg}</div>
                    <div class="button_container register_button">
                        <button type="submit" id="re_form_submit"><span>NEXT</span></button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script>
        var allow = false;

        // 提交form表单
        $(".login_button").on('click', function (){
            $(".login_form").submit()
        })
        $(".register_button").on('click', function (){
            $(".register_form").submit()
        })

        $(".hide_login_btn").on("click",function(){
            $(".index_content").removeAttr("hidden");
            $(".login_box").toggleClass("loginShowed");
        });

        $(".login_form").on("submit" , function (e) {
            if (!allow) {
                $(".msg").removeAttr("hidden");
                $('.msg').html('验证码错误');
                return false;
            }
        })

        $(function () {
            $(".verificationImg").bind("click", function () {
                $(this).hide().attr('src', '/kaptcha?random=' + Math.random()).fadeIn();
            })

            $("#input_code").bind("input propertychange", function () {
                var value = $("#input_code").val();
                console.log(value);
                $.ajax({
                    url: "/codeCheck",
                    type: "post",
                    data: "code=" + value,
                    beforeSend: function () {
                        $(".msg").removeAttr("hidden");
                        $(".msg").html("正在检测");
                    },
                    success: function (data) {
                        if (data == 0) {
                            $(".msg").html("验证码错误");
                        } else {
                            clearNotice()
                            allow = true;
                        }
                    }
                });
            });
        });

        $(document).click(function (e) {
            var target = $(e.target)
            if (target.closest("#input_name").length == 0 && $("#input_name").val() == "") {
                $(".place_name").css("color", "#757575");
                $(".place_name").css("transform", "unset");
            }
            if (target.closest("#input_pwd").length == 0 && $("#input_pwd").val() == "") {
                $(".place_pwd").css("color", "#757575");
                $(".place_pwd").css("transform", "unset");
            }
            if (target.closest("#input_code").length == 0 && $("#input_code").val() == "") {
                $(".place_code").css("color", "#757575");
                $(".place_code").css("transform", "unset");
            }
            if (target.closest("#re_input_name").length == 0 && $("#re_input_name").val() == "") {
                $(".re_place_name").css("color", "#fbd3dd");
                $(".re_place_name").css("transform", "unset");
            }
            if (target.closest("#re_input_pwd").length == 0 && $("#re_input_pwd").val() == "") {
                $(".re_place_pwd").css("color", "#fbd3dd");
                $(".re_place_pwd").css("transform", "unset");
            }
            if (target.closest("#re_input_repwd").length == 0 && $("#re_input_repwd").val() == "") {
                $(".re_place_repwd").css("color", "#fbd3dd");
                $(".re_place_repwd").css("transform", "unset");
            }
            if (target.closest("#re_input_code").length == 0 && $("#re_input_code").val() == "") {
                $(".re_place_code").css("color", "#fbd3dd");
                $(".re_place_code").css("transform", "unset");
            }

        });
        $("#input_name").on('focus', function (e) {
            console.log(e);
            e.preventDefault();
            $(".place_name").css("color", "#9d9d9d");
            $(".place_name").css("transform", "translate(-12%, -50%) scale(0.75)");
        })
        $("#input_pwd").on('focus', function (e) {
            e.preventDefault();
            $(".place_pwd").css("color", "#9d9d9d");
            $(".place_pwd").css("transform", "translate(-12%, -50%) scale(0.75)");
        })
        $("#input_code").on('focus', function (e) {
            e.preventDefault();
            $(".place_code").css("color", "#9d9d9d");
            $(".place_code").css("transform", "translate(-12%, -50%) scale(0.75)");
        })
        $("#re_input_name").on('focus', function (e) {
            e.preventDefault();
            $(".re_place_name").css("color", "#fff");
            $(".re_place_name").css("transform", "translate(-12%, -50%) scale(0.75)");
        })
        $("#re_input_pwd").on('focus', function (e) {
            e.preventDefault();
            $(".re_place_pwd").css("color", "#fff");
            $(".re_place_pwd").css("transform", "translate(-12%, -50%) scale(0.75)");
        })
        $("#re_input_repwd").on('focus', function (e) {
            e.preventDefault();
            $(".re_place_repwd").css("color", "#fff");
            $(".re_place_repwd").css("transform", "translate(-12%, -50%) scale(0.75)");
        })
        $("#re_input_code").on('focus', function (e) {
            e.preventDefault();
            $(".re_place_code").css("color", "#fff");
            $(".re_place_code").css("transform", "translate(-12%, -50%) scale(0.75)");
        })



        $('.show_register_btn').on('click', function () {
            $('#lastest').stop().addClass('active');
        });

        $('.close').on('click', function () {
            $('#lastest').stop().removeClass('active');
        });



        var password = false;
        var kaptcha = false;

        $("#re_input_code").bind("input propertychange", function () {
            var value = $("#re_input_code").val();
            console.log(value);
            $.ajax({
                url: "/codeCheck",
                type: "post",
                data: "code=" + value,
                beforeSend: function () {
                    $(".register_msg").removeAttr("hidden");
                    $(".register_msg").html("正在检测");
                },
                success: function (data) {
                    if (data == 0) {
                        kaptcha = false;
                        $(".register_msg").html("验证码错误");
                    } else {
                        kaptcha = true;
                        $(".register_msg").attr("hidden", "");
                        allow = true;
                    }
                }
            });
        });

        $("#re_input_pwd").bind("input propertychange",function () {
            var pwd = $("#re_input_pwd").val();
            var rePwd = $("#re_input_repwd").val()
            if (pwd != rePwd) {
                password = false;
                console.log(pwd , rePwd);
                $(".register_msg").removeAttr("hidden")
                $(".register_msg").html("两次密码不一致")
            } else {
                password = true;
                $(".register_msg").attr("hidden","true")
            }
        });
        $("#re_input_repwd").bind("input propertychange",function () {
            var pwd = $("#re_input_pwd").val();
            var rePwd = $("#re_input_repwd").val()
            if (pwd != rePwd) {
                password = false;
                console.log(pwd , rePwd);
                $(".register_msg").removeAttr("hidden")
                $(".register_msg").html("两次密码不一致")
            } else {
                password = true;
                $(".register_msg").attr("hidden","true")
            }
        });


        $(".register_form").on("submit", function (e) {
            console.log(123);
            if (!password) {
                $(".register_msg").removeAttr("hidden")
                $(".register_msg").html("两次密码不一致")
                return false;
            }
            if (!kaptcha) {
                $(".register_msg").removeAttr("hidden")
                $(".register_msg").html("验证码错误！")
                return false;
            }
        })
        $("#re_verificationInput").bind("input propertychange", function () {
            var value = $("#re_verificationInput").val();
            console.log(value);
            $.ajax({
                url: "/codeCheck",
                type: "post",
                data: "code=" + value,
                beforeSend: function () {
                    $(".register_msg").removeAttr("hidden");
                    $(".register_msg").html("正在检测");
                },
                success: function (data) {
                    if (data == 0) {
                        kaptcha = false;
                        $(".register_msg").html("验证码错误");
                    } else {
                        kaptcha = true;
                        $(".register_msg").attr("hidden", "");
                        allow = true;
                    }
                }
            });
        });

        $("#register_pwd").bind("input propertychang",checkPwd("#register_pwd"));
        $("#rePwd").bind("input propertychang",checkPwd("#rePwd"));

        function checkPwd(elem) {
            $(elem).bind("input propertychange", function (){
                var pwd = $("#register_pwd").val();
                var rePwd = $("#rePwd").val()
                if (pwd != rePwd) {
                    password = false;
                    console.log(pwd , rePwd);
                    $(".register_msg").removeAttr("hidden")
                    $(".register_msg").html("两次密码不一致")
                } else {
                    password = true;
                    $(".register_msg").attr("hidden","true")
                }
            })
        }


        $("#verificationInput").focus(clearNotice);


        function clearNotice() {
            $(".msg").attr("hidden", "");
        }

        $(".register_form").on("submit", function (e) {
            console.log(123);
            if (!password) {
                $(".register_msg").removeAttr("hidden")
                $(".register_msg").html("两次密码不一致")
                return false;
            }
            if (!kaptcha) {
                $(".register_msg").removeAttr("hidden")
                $(".register_msg").html("验证码错误！")
                return false;
            }
        })
    </script>
</body>
</html>